<template>
    <div>
        <!-- breadcrumb -->
        <div class="breadcrumb">
            <div class="container clear">
                <div class="breadcrumb-main clear">
                    <div class="breadcrumb-hd">您的位置：</div>
                    <ul class="breadcrumb-bd clear">
                        <li class="breadcrumb-item">
                            <router-link to="/">首页</router-link>
                        </li>
                        <li class="breadcrumb-item">
                            <router-link to="/News">新闻中心</router-link>
                        </li>
                        <li class="breadcrumb-item cur">{{title}}</li>
                    </ul>
                </div>
            </div>
            <!-- news-details -->
            <div class="new-detail">
                <div class="container">
                    <div class="new-detail-main">
                        <div class="new-detail-hd">
                            <h3>{{title}}</h3>
                            <span class="new-detail-time">2017-06-26</span>
                        </div>
                        <div class="new-detail-bd" v-html="content">
                        </div>
                        <div class="new-detail-ft clear">
                            <div class="new-detail-pre">
                                <router-link :to="{path:'/News/NewsDetail/'+LastNewsId}" tag="li" v-show="LastNewsTitle!=null">上一篇：{{LastNewsTitle}}
                                </router-link>
                            </div>
                            <div class="new-detail-next">
                                <router-link :to="{path:'/News/NewsDetail/'+NextNewsId}" tag="span" v-show="NextNewsTitle!=null">下一篇：{{NextNewsTitle}}
                                </router-link>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import $ from 'jquery'

export default {
    data() {
        return {
            id: this.$route.params.id,
            title: '',
            content: '',
            LastNewsId: '',
            LastNewsTitle: '',
            NextNewsId: '',
            NextNewsTitle: '',
        }
    },
    // 过滤器
    filters: {

    },
    // 计算属性
    computed: {
    },
    // 方法
    methods: {
    },
    mounted() {
        this.$nextTick(function () {
            var NewsId = this.id,
                that = this

            $.get("http://192.168.0.155:155/api/Main/GetNewsDetails",
                {
                    "NewsId": NewsId
                }, (res) => {
                    that.title = res.NewsTitle
                    that.content = res.NewsContent
                    that.LastNewsId = res.LastNewsId
                    that.LastNewsTitle = res.LastNewsTitle
                    that.NextNewsId = res.NextNewsId
                    that.NextNewsTitle = res.NextNewsTitle
                })
        })
    }
}


</script>


<style>
/* 新闻详情 */

.new-detail-main {
    border: 1px solid #ececec;
    border-radius: 5px;
    background: #fff;
    padding: 25px;
    margin-bottom: 50px;
    padding-top: 70px;
    min-height: 437px;
    position: relative;
}

.new-detail-hd {
    text-align: center;
    margin-bottom: 25px;
}

.new-detail-hd h3 {
    font-size: 21px;
    color: #323232;
    margin-bottom: 10px;
}

.new-detail-hd .new-detail-time {
    font-size: 16px;
    color: #b4b4b4;
}

.new-detail-bd {
    margin-bottom: 10px;
    position: relative;
}

.new-detail-bd img {
    max-width: 100%;
}

.new-detail-ft {
    position: absolute;
    bottom: 18px;
    left: 24px;
    width: 1155px;
}

.new-detail-ft a {
    color: #443226;
    font-size: 15px;
}

.new-detail-ft .new-detail-pre {
    float: left;
}

.new-detail-ft .new-detail-pre:hover,
.new-detail-ft .new-detail-next:hover {
    color: #1d87f8;
    cursor: pointer;
}

.new-detail-ft .new-detail-next {
    float: right;
}
</style>
